<script setup>
import { ref, reactive,watch, nextTick,onMounted, onUnmounted } from 'vue';
import Sortable from 'sortablejs' 
import warningCircle from "@/assets/images/BasicConfig/BannerConfig/warning-circle.png";

const props = defineProps({
    tablePadding:{
      default:"0 20px",
      type:String
    },
    showBtn:{
      default:true,
      type:Boolean
    },
    stripe:{
      default:true,
      type:Boolean
    },
    rowKey:{
      default:"",
      type:String
    },
    showLine:{
      default:true,
      type:Boolean
    },
    //表单类型
    tableType:{
      default:1,
      type:Number
    },
    //搜索表单结构的数组
    forms:{
        default:[],
        type:Array
    },
    //左按钮区域
    btnLefts:{
        default:[],
        type:Array
    },
    //右按钮区域
    btnRights:{
        default:[],
        type:Array
    },
    //是否显示搜索区域按钮
    isBtn:{
        default:true,
        type:Boolean
    },
    //是否显示搜索按钮
    isSearch:{
        default:true,
        type:Boolean
    },
    tableWidth:{
      default:50,
      type:Number
    },
    //是否显示重置按钮
    isReset:{
        default:true,
        type:Boolean
    },
    //搜索表单区域和表格的额外内容
    isAdditional:{
        default:false,
        type:Boolean
    },
    //是否显示表格
    showTable:{
      default:true,
      type:Boolean
    },
    //表格之外其他内容
    isOtherContent:{
      default:false,
      type:Boolean
    },
    searchBtns:{
        default:[],
        type:Array
    },
    tableLoading:{
        default:false,
        type:Boolean
    },
    //表格数据
    tableData:{
        default:[],
        type:Array
    },
    // 是否显示表格序号
    tableIndex:{
        default:false,
        type:Boolean
    },
    // 表格的配置
    tableConfig:{
        default:[],
        type:Array
    },
    //是否显示分页
    isShowPage:{
        default:true,
        type:Boolean
    },
    //总条数
    totalPage:{
        default:0,
        type:Number
    },

    //是否开始拖拽
    isDrag:{
      default:false,
      type:Boolean
    },
    //是否多选
    tableSelection:{
      default:false,
      type:Boolean
    },
    //是否禁用全选框
    allSelectFlag:{
      default:false,
      type:Boolean
    },
    //是否需要展开子项
    tableExpand:{
      default:false,
      type:Boolean
    },
    //合并单元格
    arraySpanMethod:{
      default:()=>{},
      type:Function
    },
    //间隔
    showJg:{
      default:true,
      type:Boolean
    },
    // 多选开启时是否在数据更新之后会保留当前选中的数据
    reserveSelection:{
      default:false,
      type:Boolean
    },
    // page参数设置 默认size、current
    pageConfig:{
      default:()=>({size:'size',current:'current'}),
      type:Object
    },
    // 重新请求
    noResetTable:{
      default:false,
      type:Boolean
    }
})
const emits = defineEmits(["handlerSearch","drawHandle","selectHandle","selectAllHandle","handleSelectionChange","expandChange"]);
const btnLoading = ref(false);
const formInline = reactive({})
const table = ref(null);
const tableRefId = ref(null);
const instance = getCurrentInstance();



const sortInfo = reactive({
  orderBy:'',
  rule:""
});
const page = reactive({
    pageSizes: [10, 20, 50, 100, 200],
    pageSize: 10,
    layout: "total,sizes, prev, pager, next,jumper",
    currentPage: 1,
    total: 0,
})

const getRandomId = ()=>{
  tableRefId.value =  `table${parseInt(Math.random() * 1000000)}`;
}
getRandomId();
const handlerSearch = ()=>{
    resultSubmitForm();
    const pages = {}
    pages[props.pageConfig.size] = page.pageSize
    pages[props.pageConfig.current] = page.currentPage
    emits("handlerSearch",{...formInline,page:{...pages},...sortInfo})
}
const clearForm = ()=>{
    let forms = props.forms;
    if (Array.isArray(forms)) {
      forms.forEach((ele) => {
        if(!ele.disabled){
          if (
            ele.type === "input" ||
            ele.type === "select" ||
            ele.type === "radio" ||
            ele.type === 'datetime' || ele.type === 'date'
          ) {
            if(ele.multiple){
              ele.model =[]
            }else{
              ele.model = "";
            }
          } else if (ele.type === "datePicker") {
            ele.model = [];
          } else if (
            ele.type === "timePicker" ||
            ele.type === "datetimerange"
          ) {
            ele.model = null;
          } else if (ele.type === "cascader" || ele.type === "area") {
            ele.model = [];
          } else if (ele.type === "checkbox") {
            ele.model = [];
            if (ele.isAll) {
              ele.checkAll = false;
              ele.isIndeterminate = false;
            }
          } else if (ele.type === "intervalAmount" || ele.type === "numberIntervals") {
            ele.minVal = ""
            ele.maxVal = ""
          } else if (ele.type === "slot") {
            if (Array.isArray(ele.model)) {
              ele.model[0] = "";
              ele.model[1] = "";
            } else {
              ele.model = "";
            }
          }
        }
      });

    }
    sortInfo.orderBy = "";
    sortInfo.rule = "";
    if(table.value){
      table.value.clearSort()
    }

    handleCurrentChange(1)
}
const sortChange = (info)=>{
  sortInfo.orderBy = info.prop;
  sortInfo.rule = info.order == "ascending"?'asc':info.order == "descending"?'desc':"";
  handleCurrentChange(1)
}
const resultSubmitForm = ()=>{
    let forms = props.forms;
    if (Array.isArray(forms)) {
      forms.forEach((ele) => {
        if (ele.type === "area") {
          formInline[ele.prop] = ele.model[ele.model.length - 1];
          return
        }
        if (ele.type === "select" && ele.multiple) {
          ele.model = ele.model || [];
          if(ele.isString){
            formInline[ele.prop] = ele.model.join(',')
          }else{
            formInline[ele.prop] = ele.model;
          }
          return
        }
        if (ele.type === 'cascader') {
          if (Array.isArray(ele.model) && ele.model.length > 0) {
            if (ele.state === "multiple" || ele.state === "default") {
              const str = ele.model.toString();
              formInline[ele.prop] = str;
            } else {
              formInline[ele.prop] = ele.model[ele.model.length - 1];
            }
          } else {
            if (Array.isArray(ele.prop)) {
              for (let i = 0; i < ele.prop.length; i++) {
                formInline[ele.prop[i]] = ""
              }
            }
            formInline[ele.prop] = "";
          }
        } else {
          if (Array.isArray(ele.model) && ele.model.length > 0) {
            formInline[ele.prop[0]] = ele.model[0];
            formInline[ele.prop[1]] = ele.model[1];
          } else if (Array.isArray(ele.model) && ele.model.length === 0) {
            formInline[ele.prop[0]] = "";
            formInline[ele.prop[1]] = "";
          } else if (Array.isArray(ele.prop) && ele.model === null) {
            formInline[ele.prop[0]] = "";
            formInline[ele.prop[1]] = "";
          } else if (ele.type === "intervalAmount" || ele.type === "numberIntervals") {
            formInline[ele.prop[0]] = ele.minVal;
            formInline[ele.prop[1]] = ele.maxVal;
          } else {
            formInline[ele.prop] = ele.model;
          }
        }
      });
    }
};
const handleSizeChange = (pageSize)=>{
    page.pageSize = pageSize
    handleCurrentChange(1)
}
const handleCurrentChange = (currentPage)=>{
    page.currentPage = currentPage;
    handlerSearch();
}
const rowDrop = ()=>{
   
    const tbody = document.querySelector(`#${ tableRefId.value } .el-table__body-wrapper .el-table__body tbody`)
    // console.log(tbody);
    Sortable.create(tbody, {
      onEnd({ newIndex, oldIndex }) {
        emits("drawHandle",newIndex,oldIndex)
      }
    })
};
onMounted(()=>{
  if(props.isDrag){
    rowDrop();
  }
})
watch(()=>props.tableData,(newval)=>{
  if(newval && newval.length>0){
    if(props.isDrag){
      
    }
  }
})
const selectHandle = (val,row)=>{
  emits('selectHandle',val,row);
};
const selectAllHandle = (val)=>{
  emits('selectAllHandle',val);
};
const handleSelectionChange = (val)=>{
  emits('handleSelectionChange',val);
}
const checkHaveData = (rows)=>{
    if(rows.length>0){
        rows.forEach(row => {
          table.value.toggleRowSelection(row);
        });
    }else{
      table.value.clearSelection();
    }
};
const selectable = (rows)=>{

  return rows.selectable === true?true:rows.selectable === false?false:true;
}
const cellClass = (row)=>{
  if (row.columnIndex === 0 && props.allSelectFlag) {
      return 'DisableSelection'
  }
};
const expandChange = (row)=>{
  nextTick(()=>{
    $('.layout .el-table--enable-row-transition .el-table__body td.el-table__cell').css({background:'#f9f9f9'});
    $('.layout .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell').css({background:'#fff'});
    
    $('.el-table__expand-icon--expanded').parent().parent().parent().children().css({background:'rgb(214,230,255)'});
    $('.el-table__expand-icon--expanded').parent().parent().parent().next().children().css({background:'rgb(214,230,255)'});
    emits("expandChange",row)
  })

}
const initSearch = ()=>{
  handleCurrentChange(1);
}




nextTick(()=>{
    setTableHeight();
})
onMounted(()=>{
  if(!props.noResetTable){
    handleCurrentChange(1);
  }
 


  $(window).resize(() => {
    setTableHeight();
  });
  // window.addEventListener('resize', () => {
  //   let screenWidth = window.screen.width;
  //   if(screenWidth>1680){
  //     props.tableHeight = 600
  //   }else{
  //     props.tableHeight = 400
  //   }
  // })
})
const setTableHeight = ()=>{

  let heightF = $('.search-table .search-line').outerHeight() || 0;
  let heightL = props.showLine?$('.search-table .line-block').outerHeight():0;
  let heightA = props.isAdditional?$('.search-table .additional').outerHeight():0;
  let heightB = $('.search-table .btn-area').outerHeight() || 0;
  let heightj = $('.search-table .jg').outerHeight() || 0;
  let tableHeight = `calc(100% - ${ heightF + heightL + heightA + heightB + heightj }px)`;
  $('.search-table .table').css('height',tableHeight);
}
//导出部分方法
defineExpose({initSearch,handlerSearch,checkHaveData,table,clearForm})



</script>
<template>
    <div style="width:100%;height:100%;position:relative;">
      <div class="search-table">
          <div class="search-line" v-if="forms.length > 0">
            <el-form v-if="forms.length > 0" :inline="true" class="demo-form-inline">
              <template v-for="(item, index) in forms">
              <!--input-->
              <el-form-item
                  v-if="item.type === 'input'"
                  :key="index"
                  :label="item.label"
              >
                  <el-input
                  v-model="item.model"
                  :placeholder="item.placeholder"
                  :style="item.width ? `width:${item.width}px` : `width:260px`"
                  clearable
                  :disabled="item.disabled"
                  :type="item.inputType ? item.inputType : 'string'"
                  @input="typeof item.handleInput ==='function'?item.handleInput($event):()=>{}"
                  :maxlength="item.maxlength?item.maxlength:-1"
                  
                  ></el-input>
              </el-form-item>
              <!--select-->
              <el-form-item
                  v-if="item.type === 'select'"
                  :key="index"
                  :label="item.label"
              >
                  <el-select
                  v-model="item.model"
                  :placeholder="item.placeholder"
                  :clearable="item.clearable === null || item.clearable === '' || item.clearable === undefined?true:item.clearable"
                  :disabled="item.disabled"
                  :loading="item.loading"
                  :remote="item.remote"
                  :style="item.width ? `width:${item.width}px` : `width:260px`"
                  @change="typeof item.handleChange ==='function'?item.handleChange($event):()=>{}"
                  v-selectClose
                  :multiple="item.multiple?item.multiple:false"
                  :filterable="item.filterable?item.filterable:false" 
                  collapse-tags
                  >
                  <el-option
                      v-for="it in item.data"
                      :key="it.value"
                      :label="it.label"
                      :value="it.value"
                  />
                  </el-select>
              </el-form-item>
              <!--date-->
              <el-form-item
                  v-if="item.type === 'date'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-date-picker
                  v-model="item.model"
                  :placeholder="item.placeholder || '请选择日期时间'"
                  clearable
                  type="date"
                  :disabled-date="item.disabledDate"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  
                  :style="item.width ? `width:${item.width}px` : `width:260px`"
                  />
              </el-form-item>
              <!--month-->
              <el-form-item
                  v-if="item.type === 'month'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-date-picker
                      v-model="item.model"
                      :placeholder="item.placeholder || '请选择月份'"
                      clearable
                      type="month"
                      :disabled-date="item.disabledDate"
                      value-format="yyyy-MM"
                      
                      :style="item.width ? `width:${item.width}px` : `width:260px`"
                  />
              </el-form-item>
              <!--datetime-->
              <el-form-item
                  v-if="item.type === 'datetime'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-date-picker
                  v-model="item.model"
                  :placeholder="item.placeholder || '请选择日期时间'"
                  clearable
                  format="YYYY-MM-DD HH:mm:ss"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :disabled-date="item.disabledDate"
                  :style="item.width ? `width:${item.width}px` : `width:260px`"
                  />
              </el-form-item>
              <!--datePicker-->
              <el-form-item
                  v-if="item.type === 'datePicker'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-date-picker
                  v-model="item.model"
                  :end-placeholder="item.endPlaceholder || '结束日期'"
                  :disabled="item.disabled"
                  :disabled-date="item.disabledDate"
                  @calendar-change="item.changeDateValue"
                  @change = "item.editDateValue"
                  :start-placeholder="item.startPlaceholder || '开始日期'"
                  :clearable="item.clearable === null || item.clearable === '' || item.clearable === undefined?true:item.clearable"
                  range-separator="至"
                  type="daterange"
                  :value-format="item.format?item.format:'YYYY-MM-DD HH:mm:ss'"
                  :default-time="item.defaultTime ? item.defaultTime : [new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 2, 1, 23, 59, 59),]"
                  :style="item.width ? `width:${item.width}px` : `width:340px`"
                  />
              </el-form-item>
              <!--monthPicker-->
              <el-form-item
                  v-if="item.type === 'monthPicker'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-date-picker
                  v-model="item.model"
                  :disabled="item.disabled"
                  :end-placeholder="item.endPlaceholder || '结束日期'"
                  :disabled-date="item.disabledDate"
                  @calendar-change="item.changeDateValue"
                  @change = "item.editDateValue"
                  :start-placeholder="item.startPlaceholder || '开始日期'"
                  :clearable="item.clearable === null || item.clearable === '' || item.clearable === undefined?true:item.clearable"
                  range-separator="至"
                  type="monthrange"
                  :value-format="item.format?item.format:'YYYY-MM'"
                  :default-time="item.defaultTime ? item.defaultTime : [new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 2, 1, 23, 59, 59),]"
                  :style="item.width ? `width:${item.width}px` : `width:340px`"
                  />
              </el-form-item>
              <!--timePicker-->
              <el-form-item
                  v-if="item.type === 'timePicker'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-time-picker
                  v-model="item.model"
                  :end-placeholder="item.endPlaceholder || '结束时间'"
                  :start-placeholder="item.startPlaceholder || '开始时间'"
                  :disabled-date="item.disabledDate"
                  arrow-control
                  is-range
                  range-separator="至"
                  value-format="HH:mm:ss"
                  
                  :style="item.width ? `width:${item.width}px` : `width:340px`"
                  />
              </el-form-item>
              <!--datetimerange-->
              <el-form-item
                  v-if="item.type === 'datetimerange'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-date-picker
                  v-model="item.model"
                  :end-placeholder="item.endPlaceholder || '结束时间'"
                  :start-placeholder="item.startPlaceholder || '开始时间'"
                  clearable
                  range-separator="至"
                  type="datetimerange"
                  value-format="YYYY-MM-DD HH:mm:ss"
      
                  
                  :style="item.width ? `width:${item.width}px` : `width:340px`"
                  />
              </el-form-item>
              <!--cascader-->
              <el-form-item
                  v-if="item.type === 'cascader'"
                  :key="index"
                  :label="item.label"
                  
              >
                  <el-cascader
                  v-if="item.state === 'default'"
                  v-model="item.model"
                  :options="item.data"
                  :props="{...item.props}"
                  clearable
                  v-bind="item"
                  :filterable="item.filterable?item.filterable:false"
                  
                  ></el-cascader>
                  <el-cascader
                  v-if="item.state === 'last'"
                  v-model="item.model"
                  :options="typeof(item.data) == 'function' ? item.data() : item.data"
                  :props="{...item.props}"
                  :show-all-levels="false"
                  clearable
                  v-bind="item"
                  :filterable="item.filterable?item.filterable:false"
                  
                  ></el-cascader>
                  <el-cascader
                  v-if="item.state === 'radio'"
                  :ref="item.ref"
                  v-model="item.model"
                  :options="typeof(item.data) == 'function' ? item.data() : item.data"
                  :props="{ checkStrictly: true, ...item.props}"
                  :show-all-levels="false"
                  clearable
                  v-bind="item"
                  :filterable="item.filterable?item.filterable:false"
                  
                  ></el-cascader>
                  <el-cascader
                  v-if="item.state === 'multiple'"
                  v-model="item.model"
                  :options="typeof(item.data) == 'function' ? item.data() : item.data"
                  :props="{ multiple: true, ...item.props}"
                  v-bind="item"
                  clearable
                  collapse-tags
                  :filterable="item.filterable?item.filterable:false"
                  
                  ></el-cascader>
              </el-form-item>

              <!--slot-->
              <el-form-item
                  v-if="item.type === 'slot'"
                  :key="index"
                  :label="item.label"
                  
              >
      
                  <slot
                  :form="formInline"
                  :name="item.slotName"
                  :scoped="item"
                  ></slot>
              </el-form-item>
              <!--checkbox-->
              <el-row
                  v-if="item.type === 'checkbox'"
                  :key="index"
              >
                  <el-form-item :label="item.label" >
                  <el-checkbox
                      v-if="item.isAll"
                      v-model="item.checkAll"
                      :indeterminate="item.isIndeterminate"
                      @change="(val) => handleCheckAllChange(val, item)"
                      
                  >全选
                  </el-checkbox>
                  <el-checkbox-group
                      v-model="item.model"
                      
                      @change="(val) => changeCheckbox(val, item)"
                  >
                      <el-checkbox
                      v-for="it in item.data"
                      :key="it.value"
                      :disabled="item.disabled"
                      :label="it.value"
                      >{{ it.label }}
                      </el-checkbox>
                  </el-checkbox-group>
                  </el-form-item>
              </el-row>
              <!--radio-->
              <el-row
                  v-if="item.type === 'radio'"
                  :key="index"
      
              >
                  <el-form-item :label="item.label" >
                  <el-radio-group v-model="item.model" >
                      <el-radio
                      v-for="it in item.data"
                      :disabled="item.disabled"
                      :key="it.value"
                      :label="it.value"
                      >{{ it.label }}
                      </el-radio>
                  </el-radio-group>
                  </el-form-item>
              </el-row>
              <!--slotRow-->
              <el-row
                  v-if="item.type === 'slotRow'"
                  :key="index"
              >
                  <el-form-item :label="item.label" >
                  <slot :name="item.slotName"></slot>
                  </el-form-item>
              </el-row>
              </template>
              <el-form-item  v-if="isBtn">
                  <el-button
                      v-if="isSearch"
                      :loading="btnLoading"
                      type="success"
                      @click="handlerSearch"
                      class=""
                  >查询
                  </el-button>
                  <el-button
                      v-if="isReset"
                      @click="clearForm"
                      
          
                  >重置
                  </el-button>
                  <el-button
                      v-for="(sb,index) in searchBtns"
                      :key="index"
                      :icon="sb.icon"
                      :type="sb.type"
                      @click="typeof sb.handleClick ==='function'?sb.handleClick($event):()=>{}"
                      
                  >{{ sb.label }}
                  </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="line-block" v-if="showLine">

          </div>

          <div class="btn-area" v-if="showBtn">
              <div class="left-btn">
                  <template v-for="(btn, index) in btnLefts">
                      <el-button
                          v-if="typeof btn.show === 'function'? btn.show() : btn.show"
                          :key="index"
                          :disabled="btn.disabled"
                          :type="btn.type"
                          :icon="btn.icon"
                          :plain="btn.plain ? btn.plain : false"
                          :loading="btn.loading?btn.loading:false"
                          :style="btn.style?btn.style:''"
                          @click="btn.click"
                      >
                        <img :src="btn.img" v-if="btn.img" style="width: 14px;height: 14px;margin-right: 4px;"/>
                      {{ btn.label }}
                      </el-button>
                      <template v-if="btn.tips">
                        <span :style="btn.tipsStyle">{{ btn.tips }}</span>
                      </template>
                  </template>
              </div>
              <div class="right-btn">
                  <template v-for="(btn, index) in btnRights">
                      <el-button
                          v-if="typeof btn.show === 'function'? btn.show() : btn.show"
                          :key="index"
                          :disabled="btn.disabled"
                          :type="btn.type"
                          :icon="btn.icon"
                          :plain="btn.plain ? btn.plain : false"
                          :loading="btn.loading?btn.loading:false"
                          :style="btn.style?btn.style:''"
                          @click="btn.click"
                          class="btn"
                      >
                      <img :src="btn.img" v-if="btn.img" style="width: 14px;height: 14px;margin-right: 4px;"/>
                      {{ btn.label }}
                      </el-button>
                  </template>
              </div>

          </div>
          <div class="additional" v-if="isAdditional">
              <slot name="additional"></slot>
          </div>
          <div class="table"  :class="tableType==1?'defaultTable':'modalTable'" >
            <template v-if="showTable">
              <el-table
                v-loading="tableLoading"
                :data="tableData"
                @sort-change="sortChange"
                @selection-change="handleSelectionChange"
                @select="selectHandle"
                :span-method="arraySpanMethod"
                @select-all="selectAllHandle"
                style="width: 100%;height: 100%;"
                class="deep-table"
                resizable
                :row-key="rowKey"
                :stripe="stripe"
                @expand-change="expandChange"
                border
                :id="tableRefId"
                ref="table"
                v-bind="$attrs?.nativeAttribute || {}"
                :header-cell-class-name="cellClass"
              >
              <el-table-column
                v-if="tableIndex"
                label="序号"
                type="index"
                :min-width="tableWidth?tableWidth:50"
              >
              </el-table-column>
              <el-table-column
                v-if="tableSelection"
                type="selection"
                :selectable="selectable"
                :reserve-selection="reserveSelection"
                :width="tableWidth?tableWidth:50"
              >
              </el-table-column>
              <el-table-column 
                v-if="tableExpand"
                type="expand"
                :width="tableWidth?tableWidth:50"
              >
                <template #default="scoped">
                  <slot
                    name="expandSlot"
                    :row="scoped.row"
                    :index="scoped.$index"
                  ></slot>
                </template>
              </el-table-column>
              <template v-for="(item, index) in tableConfig">
                <!--表格默认-->
                <el-table-column
                  v-if="(!item.type || item.type === 'default')"
                  :key="index"
                  :align="item.align ? item.align : 'left'"
                  :fixed="item.fixed ? item.fixed : false"
                  :header-align="item.headerAlign ? item.headerAlign : 'left'"
                  :label="item.label"
                  :prop="item.prop"
                  :sortable="item.sortable?item.sortable:false"
                  :show-overflow-tooltip="item.textOverflow?item.textOverflow:false"

                  :width="item.width?item.width:''"
                  :min-width="item.minWidth?item.minWidth:''"
                >
                  <template #header v-if="item.needHeader">
                    <div class="flex align-items-center">
                      <div>{{ item.label }}</div>
                      <el-tooltip
                        placement="top"
                        effect="dark"
                        trigger="hover"
                      >
                        <template #content>
                         <div v-html="item.headerContent"></div>
                        </template>
                        <img class="tipClass" :src="warningCircle" />
                      </el-tooltip>
                    </div>
                  </template>
                  <template #default="scoped">
                    <span v-if="item.format" :style="typeof item.style === 'function'?item.style(scoped.row[item.prop], scoped.row):item.style">{{
                        item.format(scoped.row[item.prop], scoped.row)
                      }}</span>
                    <span v-else  :style="typeof item.style === 'function'?item.style(scoped.row[item.prop], scoped.row):item.style">{{ scoped.row[item.prop] === '' || scoped.row[item.prop] === null || scoped.row[item.prop] === undefined  ? '-' : scoped.row[item.prop] }}</span>
                  </template>

                </el-table-column>
                <!-- 表格展开 -->
                <el-table-column 
                v-if="item.type === 'expand'"
                type="expand"
                :key="index"
                :label="item.label"
                :width="item.width ? item.width : 40"
              >
                <template #default="scoped">
                  <slot
                      :name="item.slotExpandName"
                      :row="scoped.row"
                      :index="scoped.$index"
                  ></slot>
                </template>
              </el-table-column>
                <!--表格自定义-->
                <el-table-column
                  v-if="item.type === 'image'"
                  :key="index"
                  :align="item.align ? item.align : 'left'"
                  :header-align="item.headerAlign ? item.headerAlign : 'left'"
                  :label="item.label"
                  :prop="item.prop"
                  :show-overflow-tooltip="item.textOverflow?item.textOverflow:false"
                  :min-width="item.width"
                >
                  <template #default="scoped">
                    <el-image
                      :alt="item.alt?item.alt:''"
                      :height="item.imgHeight?item.imgHeight:'100%'"
                      :src="scoped.row[item.prop]"
                      :style="item.style"
                      preview-teleported
                      :width="item.imgWidth?item.imgWidth:'100%'"
                      :preview-src-list="item.srcList || [scoped.row[item.prop]]"
                    />
                  </template>
                </el-table-column>
                <!--表格自定义-->
                <el-table-column
                  v-if="item.type === 'slot'"
                  :key="index"
                  :align="item.align ? item.align : 'left'"
                  :header-align="item.headerAlign ? item.headerAlign : 'left'"
                  :label="item.label"
                  :prop="item.prop"
                  :show-overflow-tooltip="item.textOverflow?item.textOverflow:false"
                  :width="item.width"
                >
                <template #header="scoped" v-if="item.needHeader">
                    <slot
                      :name="item.slotHeaderName"
                      :row="scoped.row"
                      :index="scoped.$index"
                    ></slot>
                  </template>
                  <template #default="scoped">
                    <slot
                      :name="item.slotName"
                      :row="scoped.row"
                      :index="scoped.$index"
                    ></slot>
                  </template>
                </el-table-column>
                <!--有子表格默认-->
                <el-table-column
                  v-if="item.type === 'child'"
                  :key="index"
                  :align="item.align ? item.align : 'left'"
                  :fixed="item.fixed ? item.fixed : false"
                  :header-align="item.headerAlign ? item.headerAlign : 'left'"
                  :label="item.label"
                  :prop="item.prop"
                  :sortable="item.sortable?item.sortable:false"
                  :show-overflow-tooltip="item.textOverflow?item.textOverflow:false"
                  :class-name="item.className?item.className:'parent-class'"
                  :width="item.width?item.width:''"
                  :min-width="item.minWidth?item.minWidth:''"
                >
                  <template v-for="(lis, key) in item.children">
                      <!--子表格默认-->
                      <el-table-column
                        v-if="(!lis.type || lis.type === 'default')"
                        :key="key"
                        :align="lis.align ? lis.align : 'left'"
                        :fixed="lis.fixed ? lis.fixed : false"
                        :header-align="lis.headerAlign ? lis.headerAlign : 'left'"
                        :label="lis.label"
                        :prop="lis.prop"
                        :sortable="lis.sortable?lis.sortable:false"
                        :show-overflow-tooltip="lis.textOverflow?lis.textOverflow:false"
                        :class-name="lis.className?lis.className:'child-class'"
                        :width="lis.width?lis.width:''"
                        :min-width="lis.minWidth?lis.minWidth:''"
                      >
                        <template #header="scopedChild" v-if="lis.needHeader">
                          <slot
                              :name="lis.slotHeaderName"
                              :row="scopedChild.row"
                              :index="scopedChild.$index"
                            ></slot>
                        </template>
                        <template #default="scoped">
                          <span v-if="lis.format" :style="typeof lis.style === 'function'?lis.style(scoped.row[lis.prop], scoped.row):lis.style">{{
                              lis.format(scoped.row[lis.prop], scoped.row)
                            }}</span>
                          <span v-else  :style="typeof lis.style === 'function'?lis.style(scoped.row[lis.prop], scoped.row):lis.style">{{ scoped.row[lis.prop] === '' || scoped.row[lis.prop] === null || scoped.row[lis.prop] === undefined  ? '-' : scoped.row[lis.prop] }}</span>
                        </template>

                      </el-table-column>
                  </template>
                </el-table-column>
                <!--操作-->
                <el-table-column
                  v-if="item.type === 'action'"
                  :key="index"
                  :align="item.align ? item.align : 'left'"
                  :header-align="item.headerAlign ? item.headerAlign : 'left'"
                  :label="item.label"
                  :width="item.width ? item.width :''"
                  :min-width="item.minWidth ? item.minWidth : ''"
                  fixed="right"
                >
                  <template #default="scoped">
                    <template v-if="item.btns && Array.isArray(item.btns)">
                      <template v-for="(it, n) in item.btns" >
      
                        <template  v-if="it.type == 'slot'">
                          
                          <slot
                            style="position:relative"
                            :name="it.slotName"
                            :row="scoped.row"
                            :index="scoped.$index"
                          ></slot>
                        </template>
                        <template v-else>
                          <el-button
                            v-if="typeof it.show === 'function'
                              ? it.show(scoped.row)
                              : () => {
                                  return true;
                                }
                          "
                            :key="n"
                            :icon="it.icon"
                            :loading="it.loading"
                            :style="it.style"
                            plain
                            size="small"
                            :type="it.type?it.type:'primary'"
                            :underline="false"
                            :disabled="it.disabled?it.disabled:false"
                            @click="
                            typeof it.click === 'function'
                              ? it.click(scoped.row, tableData, it)
                              : () => {}
                          "
                          >
                            {{ it.label(scoped.row) }}
                          </el-button>
                        </template>

                      </template>
                    </template>
                    <template v-if="item.btnSlot">
                      <slot
                      :name="item.slotName"
                      :row="scoped.row"
                      :index="scoped.$index"
                    ></slot>
                    </template>
                  </template>

                </el-table-column>
              </template>
              </el-table>
            </template>
            <template v-if="isOtherContent">
                <slot name="otherContent" :tableDataInfo="tableData" ></slot>
            </template>
          </div>
          <div style="width:100%;height:72px" class="jg" v-if="showJg"></div>
      </div>
      <div v-if="isShowPage" class="page">
        <el-pagination
            :current-page="page.currentPage"
            :layout="page.layout"
            :page-size="page.pageSize"
            :page-sizes="page.pageSizes"
            :total="totalPage"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<style>

</style>
<style lang="less" scoped>

.search-line{
  width: 100%;
  box-sizing: border-box;
  padding:0 12px;
  padding-top:12px;
  :deep(.el-form--inline .el-form-item){
      &:nth-last-child(2){
        margin-right: 10px;
      }
      

    
  }
}
.line-block{
  width: 100%;
  height: 12px;
  background: #F0F2F5;
}
.page{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom:0;
  padding:0 12px;
  box-sizing: border-box;
  background: #fff;
  z-index: 10;
  padding-bottom:12px;
}
.search-table{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    box-sizing: border-box;
    :deep(.el-table__inner-wrapper::before){
      height: 0px;
    }

    .demo-form-inline {

        padding-bottom:0;
        background: #fff;
        border-radius: 4px 4px 0 0;
        .el-form-item {
          margin-bottom: 12px;
          margin-right: 12px;
        }
    }

    .additional{
        width: 100%;
        padding:0 12px;
        padding-top:12px;
        box-sizing: border-box;
    }
    .btn-area{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding:0 12px;
        padding-top:12px;
        box-sizing: border-box;

        .left-btn{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            align-items: center;
            // width: 45%;
            // flex: 1;
        }
        .right-btn{
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            // width: 45%;
            align-items: center;
            flex: 1;
        }
    }
    .table{
        width: 100%;
        padding:0 12px;
        box-sizing: border-box;

     
        .deep-table{
            width: 100%;

            box-sizing: border-box;
        }
        :deep(.el-table) th{
            background: #fff;
        }
        :deep(.el-table) .parent-class{
          border-bottom:0px;
          padding:10px 0;
          position: relative;
          &::before{
            content:"";
            display:block; 
            width: calc(100% - 32px);
            height: 1px;
            background: #ddd;
            position: absolute;
            bottom:0px;
            left:16px;
          }
          &::after{
            content:"";
            display:block;
            width: 1px;
            height: 20px;
            background: #ddd;
            position: absolute;
            top:30px;
            right:0px;
          }
          .cell{
            border-right: 0px;
          }
        }
        :deep(.el-table) .no-right{
          border-bottom:0px;
          padding:10px 0;
          position: relative;
          &::before{
            content:"";
            display:block; 
            width: calc(100% - 32px);
            height: 1px;
            background: #ddd;
            position: absolute;
            bottom:0px;
            left:16px;
          }

          .cell{
            border-right: 0px;
          }
        }
        :deep(.el-table) .child-class{
          border-bottom:0px;
          padding:10px 0;
          .cell{
            border-right: 0px;
          }
        }
        :deep(.DisableSelection) .cell{
          display: none;
        }
        :deep(.el-table__body-wrapper){
            height: calc(100% - 38px);
            overflow-y:auto;
            box-sizing: border-box;
        }

    }
    .modalTable{
        :deep(.el-table) th{
          background: #EBEBEB;
        }
        :deep(.el-table) th>.cell{
          font-size: 14px;
          font-weight: bold;
          color: #313233;
        }
    }
}

.tipClass {
  height: 14px;
  width: 14px;
  margin-left: 4px;
}
:deep(.el-cascader){
  .el-tag{
    background: #fff;
    color: #000;
  }
}

</style>